<template>
    <div class="atoname" :class="datas.cmpt_class || []" :style="datas.cmpt_style || {}">
        <el-select v-model="selectDatas.selvalue" @change="selectChange" :multiple="selectDatas.multiple" collapse-tags clearable placeholder="请选择">
            <el-option
            v-for="item in selectDatas.selData"
            :key="item.id"
            :label="item.value"
            :value="item.id">
            </el-option>
        </el-select>
    </div>
</template>
<script>
export default {
    name: 'selComponent',
    props: {
        datas: {
            type: Object,
            default() {
                return {
                    attr_data_conf: `{
                        selData: [
                            {
                                id: 'fjksajfojf34q',
                                value: '辣子鸡丁'
                            }, 
                            {
                                id: 'fdsgdrfgjdfh4',
                                value: '椒盐蘑菇'
                            }, 
                            {
                                id: 'fdsgdrfgtwe54',
                                value: '鱼香肉丝'
                            }
                        ],
                        multiple: true,
                        dafaultValue: '辣子鸡丁',
                        selvalue: ''
                    }`,
                    options: null,
                    value: '',
                    event_ele_conf:`{
                        selectChange:function(data){
                            console.log(data);
                        },
                        mounted:function(){}
                    }`,
                    cmpt_class:[],
                    cmpt_style:{}
                }
            }
        }
    },
    data() {
        return {
            selectDatas: null
        }
    },
    created(){
        if(typeof(this.datas.attr_data_conf) == 'string'){
            try{
                this.selectDatas = new Function(`return ${this.datas.attr_data_conf}`)()
            }catch(err){
                this.selectDatas = JSON.parse(this.datas.attr_data_conf)
            }
        }else{
            this.selectDatas = this.datas.attr_data_conf
        }
        let extraMethods = new Function(`return ${this.datas.event_ele_conf}`)();
        Object.keys(extraMethods).forEach(key => {
            if(key!=='mounted'){
                this[key] = extraMethods[key].bind(this);
            }
        });
    },
    mounted () {
        let extraMethods = new Function(`return ${this.datas.event_ele_conf}`)();
        if(extraMethods.mounted){//处理事件配置中的mounted
            extraMethods.mounted.bind(this)();
        }
    },
    methods: {
    }
}
</script>
<style scoped>

</style>
